/**
 * 内容提升
 */

import React, { useState, ReactNode } from "react";
import { Input } from "antd";

const ContentPromotion: React.FC = () => {
  console.log("ContentPromotion");

  return (
    <ColorPicker>
      <p>Hello, World</p>
      <ExpensiveTree />
    </ColorPicker>
  );
};

interface ColorPickerProps {
  children: ReactNode;
}

function ColorPicker(props: ColorPickerProps) {
  const [color, setColor] = useState<string>("red");
  console.log("ColorPicker");

  return (
    <div style={{ color }}>
      <Input value={color} onChange={e => setColor(e.target.value)} />
      {props.children}
    </div>
  );
}

function ExpensiveTree() {
  console.log("ExpensiveTree");
  return <p>ExpensiveTree</p>;
}

export default ContentPromotion;
